<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>审批参与活动人员</title>
    <script src="js/jquery-3.7.0.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/vue.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div id="app">
    <div class="search-filter">
        <label for="score-search">搜索诚信分:</label>
        <input type="number" id="score-search" v-model="scoreSearch" placeholder="输入分数">
        <button class="btn btn-primary" @click="searchMembers">搜索</button>
        <button class="btn btn-primary" @click="loadClubMembers">显示本社团成员</button>
    </div>
    <div class="content" v-for="member in paginatedMembers" :key="member.studentId">
        <div class="member-item">
            <img :src="'img/head/' + member.head" alt="成员头像">
            <div class="member-info">
                <h5 class="card-title"><strong>{{ member.studentName }}</strong></h5>
                <p><strong>活动分:</strong> {{ member.activityScore }}</p>
                <p><strong>诚信分:</strong> {{ member.lntegrityScore }}</p>
                <button class="btn btn-primary" @click="approveMember(member)">同意</button>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
    <ul class="pagination">
        <li :class="{ disabled: currentPage === 1 }">
            <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
        </li>
        <li v-for="page in totalPages" :key="page" :class="{ active: currentPage === page }">
            <button @click="changePage(page)">{{ page }}</button>
        </li>
        <li :class="{ disabled: currentPage === totalPages }">
            <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">下一页</button>
        </li>
    </ul>
</div>
<style>
    #app {
        width: 1100px;
        margin: auto;
    }

    .content {
        width: 24%;
        float: left;
        box-sizing: border-box;
        padding: 10px;
        margin-bottom: 20px;
    }

    .member-item {
        border: 1px solid #ccc;
        border-radius: 5px;
        overflow: hidden;
    }

    .member-item img {
        width: 100%;
        height: auto;
    }

    .member-info {
        padding: 10px;
    }

    .search-filter {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .search-filter label {
        margin-right: 10px;
    }

    .search-filter input {
        padding: 5px 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f9f9f9;
        margin-right: 10px;
    }

    .search-filter button {
        margin-right: 10px;
    }

    .btn {
        padding: 5px 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f9f9f9;
        cursor: pointer;
        color: black;
    }

    .btn:hover {
        background-color: #007bff;
    }

    .pagination {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        list-style: none;
        padding: 0;
    }

    .pagination li {
        margin: 0 5px;
    }

    .pagination button {
        padding: 5px 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f9f9f9;
        cursor: pointer;
    }

    .pagination button.active {
        background-color: #007bff;
        color: white;
    }

    .pagination button:disabled {
        background-color: #ccc;
        cursor: not-allowed;
    }
</style>
<script>
    $(function() {
        const clubId = new URLSearchParams(window.location.search).get('clubId');
        const activityId = new URLSearchParams(window.location.search).get('activityId');
        $.ajax({
            url: `activity/member/${activityId}`,
            type: "get",
            dataType: "json",
            success: function(data) {
                new Vue({
                    el: "#app",
                    data: {
                        members: data,
                        memberSearch: '',
                        scoreSearch: '',
                        currentPage: 1,
                        itemsPerPage: 8
                    },
                    computed: {
                        filteredMembers() {
                            let filtered = this.members;
                            if (this.memberSearch) {
                                filtered = filtered.filter(member => member.studentName.includes(this.memberSearch));
                            }
                            if (this.scoreSearch) {
                                filtered = filtered.filter(member => member.activityScore > this.scoreSearch || member.lntegrityScore > this.scoreSearch);
                            }
                            return filtered;
                        },
                        totalPages() {
                            return Math.ceil(this.filteredMembers.length / this.itemsPerPage);
                        },
                        paginatedMembers() {
                            const start = (this.currentPage - 1) * this.itemsPerPage;
                            const end = start + this.itemsPerPage;
                            return this.filteredMembers.slice(start, end);
                        }
                    },
                    methods: {
                        searchMembers() {
                            this.currentPage = 1; // 搜索时重置到第一页
                            this.filteredMembers = this.members.filter(member => {
                                if (this.memberSearch && !member.studentName.includes(this.memberSearch)) {
                                    return false;
                                }
                                if (this.scoreSearch && !(member.activityScore > this.scoreSearch || member.lntegrityScore > this.scoreSearch)) {
                                    return false;
                                }
                                return true;
                            });
                        },
                        approveMember(member) {
                            $.ajax({
                                url: "activity/member/update",
                                type: "post",
                                data: {
                                    activityId: activityId,
                                    studentId: member.studentId,
                                    status: 1 // 未参与
                                },
                                success: function() {
                                    alert("已同意");
                                    location.reload(); // 刷新页面
                                }
                            });
                        },
                        // 显示本社团成员
                        loadClubMembers() {
                            $.ajax({
                                // 社团id和活动id
                                url: `activity/club/${clubId}/${activityId}`,
                                type: "get",
                                dataType: "json",
                                success: (data) => {
                                    this.members = data;
                                    this.currentPage = 1; // 加载新数据时重置到第一页
                                }
                            });
                        },
                        changePage(page) {
                            if (page < 1 || page > this.totalPages) {
                                return;
                            }
                            this.currentPage = page;
                        }
                    }
                });
            }
        });
    });
</script>
</body>
</html>
